<script setup lang="ts">
import { ConfigGlobal } from "@/components/ConfigGlobal";
import { useDesign } from "@/hooks/useDesign";
import { useWindowSize } from "@vueuse/core";

const { width, height } = useWindowSize();

const { getPrefixCls } = useDesign();
const prefixCls = getPrefixCls("app");

import { ref } from "vue";
import { Document, Menu as IconMenu, Location, Setting } from "@element-plus/icons-vue";

const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log("handleOpen", key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log("handleClose", key, keyPath);
};
const handleSelect = (key: string, keyPath: string[]) => {
  console.log("handleSelect", key, keyPath);
};
</script>

<template>
  <ConfigGlobal>
    <template #app>
      <p><strong>当前路由路径:</strong> {{ $route.fullPath }}</p>
      <el-menu
        default-active="2"
        :class="`${prefixCls}-menu`"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
        :router="true"
        @select="handleSelect"
      >
        <el-menu-item index="/">
          <template #title>
            <el-icon><IconMenu /></el-icon>
            <span>首页</span>
          </template>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><IconMenu /></el-icon>
            <span>Demo</span>
          </template>
          <el-sub-menu index="2-1">
            <template #title>
              <el-icon><IconMenu /></el-icon>
              <span>测试例子</span>
            </template>
            <el-menu-item index="/test/form">test form</el-menu-item>
            <el-menu-item index="/test/createForm">test create form</el-menu-item>
            <el-menu-item index="/test/formDesigner">test form designer</el-menu-item>
            <el-menu-item index="/test/bpmn1">test bpmn1</el-menu-item>
            <el-menu-item index="/test/bpmn">test bpmn</el-menu-item>
            <el-menu-item index="/test/icon">test icon</el-menu-item>
            <el-menu-item index="/test/user">test user</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/test">test</el-menu-item>
        </el-sub-menu>
      </el-menu>
      <div :class="`${prefixCls}-content`">
        <RouterView />
      </div>
    </template>
  </ConfigGlobal>
</template>

<style scoped lang="scss">
$prefix-cls: #{$namespace}-app;

.size {
  width: 100%;
  height: 100%;
}

html,
body {
  @extend .size;

  padding: 0 !important;
  margin: 0;
  overflow: hidden;

  #app {
    @extend .size;
  }
}

.#{$prefix-cls}-menu:not(.el-menu--collapse) {
  float: left;
  width: 20%;
}

.#{$prefix-cls}-content {
  float: right;
  width: 80%;
}
</style>
